<template>
  <div class="app-container" style="background: none;">
    <el-row :gutter="24" class="search">
      <el-col :span="6">
        <div class="block" style="width: 100%;">
          <span class="demonstration">查看历史状态</span>
          <el-date-picker
            class="pickTime"
            v-model="selectTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6" :offset="12" style="text-align: right;">
        <el-button type="primary" @click="loadData">查询</el-button>
      </el-col>
    </el-row>
    <a-spin active :spinning="loading" style="margin-top: 30px;">
      <a-card v-if="isEmpty">
        <!-- Radis 信息实时监控 -->
        <el-row :gutter="8" type="flex" justify="space-between">
          <el-col :sm="24" :xl="12">
            <area-chart-ty v-bind="memory"/>
          </el-col>
          <el-col :sm="24" :xl="12">
            <area-chart-ty v-bind="key"/>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex" justify="space-around">
          <el-col :span="11">
            <CpuCard :dataSource="serverData"/>
          </el-col>
          <el-col :span="11">
            <MemCard :dataSource="memoryData"/>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex" style="flex-wrap: wrap; padding: 0px 30px;"  :justify="pieData.length > 1 ? 'space-between' : 'start'">
          <el-col :span="11" v-for="item in pieData" :key="item.typeName">
            <PieCard :dataSource="item"/>
          </el-col>
          <el-col :span="11">
            <TableCard/>
          </el-col>
        </el-row>
      </a-card>
      <a-empty description="暂无数据" v-else class="empty"/>
    </a-spin>
  </div>
</template>
<script>
  import moment from 'moment'
  import {
    overallState
  } from '@/api/system'
  import AreaChartTy from '@/components/chart/AreaChartTy'
  import Card from 'ant-design-vue/lib/card'
  import 'ant-design-vue/lib/card/style/css'
  import CpuCard from './components/CpuCard'
  import MemCard from './components/MemCard'
  import PieCard from './components/PieCard'
  import TableCard from './components/TableCard'

  export default {
    name: 'systemState',
    components: {
      AreaChartTy,
      'a-card': Card,
      CpuCard,
      MemCard,
      PieCard,
      TableCard,
    },
    data() {
      return {
        loading: false,
        tableLoading: true,
        isEmpty: false,
        // 定时器ID
        timer: null,
        // 定时器周期
        millisec: 3000,
        // Key 实时数量
        key: {
          title: 'cpu使用率',
          dataSource: [],
          y: '数量（个）',
          height: 340,
          min: 0,
          max: 100,
          color: '#FF6987',
          lineSize: 2,
          lineColor: '#DC143C'
        },
        // 内存实时占用情况
        memory: {
          title: '内存使用率',
          dataSource: [],
          y: '内存（KB）',
          min: 0,
          max: 100,
          height: 340,
          lineSize: 2
        },
        // 选择时间
        selectTime: '',
        // CPU
        serverData: {},
        // memory
        memoryData: {},
        pieData: {}
      }
    },
    mounted() {
    },
    beforeDestroy() {
    },
    methods: {
      /** 查询数据 */
      loadData() {
        console.log(this.selectTime)
        this.loading = true
        let time = moment(this.selectTime).format('YYYY-MM-DD HH:mm')
        overallState(time).then((res) => {
          this.isEmpty = true
          this.loading = false
          const data = res.data['sysOverallState'];
          const memory = res.data['cpuMemList'] || [];
          memory.map(item => {
            // push 数据
            this.key.dataSource.push({ x: item['time'], y: item['cpuSys'] });
            this.memory.dataSource.push({ x: item['time'], y: item['memUsage'] });
          })
          this.serverData = JSON.parse(data['overallCpu']) || {};
          this.memoryData = JSON.parse(data['overallMem']) || {};
          this.pieData = JSON.parse(data['sysFiles']) || {};
          console.log(this.pieData)
          // let time = moment().format('hh:mm:ss')
          //
          // let [{ dbSize: currentSize }, memoryInfo] = res
          // let currentMemory = memoryInfo.used_memory / 1000
          //
          // // push 数据
          // this.key.dataSource.push({ x: time, y: currentSize })
          // this.memory.dataSource.push({ x: time, y: currentMemory })
          // // 最大长度为6
          // if (this.key.dataSource.length > 6) {
          //   this.key.dataSource.splice(0, 1)
          //   this.memory.dataSource.splice(0, 1)
          // }
          //
          // // 计算 Key 最大最小值
          // let keyPole = this.getMaxAndMin(this.key.dataSource, 'y')
          // this.key.max = Math.floor(keyPole[0]) + 10
          // this.key.min = Math.floor(keyPole[1]) - 10
          // if (this.key.min < 0) this.key.min = 0
          //
          // // 计算 Memory 最大最小值
          // let memoryPole = this.getMaxAndMin(this.memory.dataSource, 'y')
          // this.memory.max = Math.floor(memoryPole[0]) + 100
          // this.memory.min = Math.floor(memoryPole[1]) - 100
          // if (this.memory.min < 0) this.memory.min = 0

        }).catch((e) => {
          console.error(e)
          this.closeTimer()
          this.$message.error('获取 Redis 信息失败')
        }).finally(() => {
          this.loading = false
        })

      },

      // 获取一组数据中最大和最小的值
      getMaxAndMin(dataSource, field) {
        let maxValue = null, minValue = null
        dataSource.forEach(item => {
          let value = Number.parseInt(item[field])
          // max
          if (maxValue == null) {
            maxValue = value
          } else if (value > maxValue) {
            maxValue = value
          }
          // min
          if (minValue == null) {
            minValue = value
          } else if (value < minValue) {
            minValue = value
          }
        })
        return [maxValue, minValue]
      },
    }
  }
</script>
<style lang="less" scoped>
  .empty {
    background: #fff;
    margin: 0;
    padding: 100px 0px;
  }

  .search {
    box-sizing: border-box;
    background: #fff;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 20px;
  }

  .block {
    width: 100%;
    .demonstration {
      display: inline-block;
      width: 30%;
    }
    .pickTime {
      display: inline-block;
      width: 70%;
    }
  }
</style>
